<template>
  <!--
      作者：luoyiming
      时间：2020-06-01
      描述：插件中心-广告-编辑
    -->
  <div class="product-add pb50" v-loading="loading">
    <!--编辑广告-->
     <el-form size="small" :model="form" ref="form" :rules="rules" label-width="100px">
       <div class="common-form">编辑广告</div>
       <el-form-item label="广告标题" prop="banner_title"><el-input v-model="form.banner_title" placeholder="请输入广告标题" class="max-w460"></el-input></el-form-item>

       <el-form-item label="广告缩略图">
         <div>
           <el-button type="primary" @click="openUpload">上传图片</el-button>
           <img class="mt10" v-img-url="'image.file_path',form"  width="120px;" alt="" />
           <!--上传图片组件-->
           <Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc">上传图片</Upload>
         </div>
       </el-form-item>

       <!-- <el-form-item label="排序"><el-input type="number" v-model="form.article_sort" placeholder="请输入数字" class="max-w460"></el-input></el-form-item> -->
       <!--提交-->
       <div class="common-button-wrapper">
         <el-button size="small" type="info" @click="cancelFunc" :loading="loading">取消</el-button>
         <el-button size="small" type="primary" @click="onSubmit" :loading="loading">提交</el-button>
       </div>
     </el-form>
  </div>
</template>

<script>
import BannerApi from '@/api/banner.js';
import Uediter from '@/components/UE.vue';
import Upload from '@/components/file/Upload';
export default {
  components: {
    /*编辑器*/
    Uediter,
    /*图片上传*/
    Upload: Upload
  },
  data() {
    return {
      /*是否加载完成*/
      loading: true,
      /*是否上传图片*/
      isupload: false,
      /*富文本配置*/
      ueditor: {
        text: '',
        config: {
          initialFrameWidth: 400,
          initialFrameHeight: 500
        }
      },
      /*form表单数据*/
      form: {
        banner_title: '',
        thumb: '',
        image:{},
      },
      /*新闻类别*/
      category: [],
      /*验证规则*/
      rules: {
        banner_title: [{ required: true, message: '请输入广告标题', trigger: 'blur' }]
      }
    };
  },
  created() {

    this.getDetail();

  },

  methods: {

    /*上传*/
    openUpload() {
      this.isupload = true;
    },

    getContent: function() {
      return this.$refs.ue.getUEContent();
    },

    /*获取图片*/
    returnImgsFunc(e) {
      let self = this;
      if (e != null) {
        this.form.thumb = e[0].file_id;
        this.form.image.file_path = e[0].file_path;
      }
      this.isupload = false;
    },

    getDetail() {
      let self = this;
      // 取到路由带过来的参数
      const params = self.$route.query.banner_id;
      BannerApi.toEditBanner({banner_id: params},true).then(res => {

          self.form = res.data.model;
          if(!self.form.thumb){
            self.form.thumb={};
          }

          self.loading = false;
        })
        .catch(error => {});
    },

    /*修改广告*/
    onSubmit() {
      let self = this;
      let params = this.form;

      // 取到路由带过来的参数
      BannerApi.editBanner(params, true)
        .then(data => {
          self.$message({
            message: data.msg,
            type: 'success'
          });
          self.$router.push('/plus/banner/index');
        })
        .catch(error => {});
    },

    /*取消添加，返回广告列表*/
    cancelFunc() {
      this.$router.push({
        path: '/plus/banner/index'
      });
    }
  }
};
</script>

<style>
.edit_container {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.ql-editor {
  height: 400px;
}
</style>
